<template>
  <div class>
    <mt-header v-bind:title="msg">
    </mt-header>
    <div>
        <ul>
          <li v-for="item in images" v-bind:key="item.id" @click="goDetail(item)">
              <img v-lazy="item.image">
          </li>
        </ul>
        
    </div>
    <mt-tabbar v-model="selected" @click.native="next" fixed>
      <mt-tab-item id="1">
        <img slot="icon" src="../assets/home.png">
        首页
      </mt-tab-item>
      <mt-tab-item id="2">
        <img slot="icon" src="../assets/pic_active.png">
        图片
      </mt-tab-item>
      <mt-tab-item id="3">
        <img slot="icon" src="../assets/blog.png">
        文章
      </mt-tab-item>
      <mt-tab-item id="4">
        <img slot="icon" src="../assets/user.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  name: "images",
  data() {
    return {
      msg: "images index",
      selected: "2",
      images: []
    };
  },
  mounted: function () {
    // `this` 指向 vm 实例
    //console.log('a is: ' , this.topics)
    let that = this;
    this.$http({
      method: 'get',
      url: 'http://api.lb.com/api/travels',
      data: {
        name: 'wise',
        info: 'wrong'
      }
    }).then(function(response) {
      if(response.status == 200 && response.data){
        let images = response.data.data;
        that.images = images;
        console.log(22)
      }
    });
  },
  methods: {
    next() {
      console.log(this.selected);
      if (this.selected == 1) {
        this.$router.push("myapp"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      if (this.selected == 2) {
        this.$router.push("images"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      if (this.selected == 3) {
        this.$router.push("blogs"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      if (this.selected == 4) {
        this.$router.push("user"); //https://router.vuejs.org/zh/guide/essentials/navigation.html
      }
      return true;
    },
    goDetail(item) {
      console.log(item);
      this.$router.push({ path: 'img_detail', query: { id: item.id }})
    }
  }
};
</script>